<!DOCTYPE html>
<html>
    <head>
        <title>PlayCanvas Examples</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="icon" type="image/png" href="playcanvas-favicon.png" />
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <div class="sidenav"></div>
        <iframe id="example"></iframe>

        <script src="examples.js"></script>
        <script>
            function titleCase(string) {
                let sentence = string.toLowerCase().split('-');
                for(let i = 0; i < sentence.length; i++){
                    sentence[i] = sentence[i][0].toUpperCase() + sentence[i].slice(1);
                }
                return sentence.join(' ');
            }

            function loadExample(example) {
                let iframe = document.getElementById('example');
                iframe.src = example;
                location.href = location.protocol +'//' +
                                location.host +
                                location.pathname +
                                '#' +
                                example;
            }

            // Load the initial example (loading the first one if none is specified)
            let url = location.href;
            let hashIndex = url.indexOf('#');
            if (hashIndex === -1) {
                loadExample(categories[0].name + '/' + categories[0].examples[0] + '.html');
            } else {
                loadExample(url.substring(hashIndex + 1));
            }

            // Procedurally build the navigation sidebar
            let sidenav = document.querySelector(".sidenav");
            categories.forEach(category => {
                let categoryEntry = document.createElement('p');
                categoryEntry.innerText = titleCase(category.name);
                sidenav.appendChild(categoryEntry);

                category.examples.forEach(example => {
                    let exampleEntry = document.createElement('a');
                    exampleEntry.addEventListener("click", event => {
                        loadExample(category.name + '/' + example + '.html')
                    }, false);
                    exampleEntry.innerText = titleCase(example);
                    sidenav.appendChild(exampleEntry);
                });
            });
        </script>
    </body>
</html>
